<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <script src="../vue-2.6.11.js"></script>

  <body>
    <!-- 模板 -->
    <div id="app">
      <!-- 旧语法 -->
      <custom-component>
        <!-- 当写在自定义标签中的内容，要混合子组件中的模板 -->
        <div slot="one">这是第1个提醒</div>
        <div slot="three">这是第3个提醒</div>

        <!-- 批量插入 -->
        <template slot="two">
          <div>这是第2个提醒</div>
          <div>这是第2个提醒</div>
          <div>这是第2个提醒</div>
          <div>这是第2个提醒</div>
        </template>

        <div>其他内容a</div>
        <div>其他内容b</div>
        <div>其他内容c</div>

        <!-- 作用域插槽 -->
        <template slot-scope="slotProps">
          <ul>
            <li v-for="item in slotProps.data">{{item}}</li>
          </ul>
        </template>
      </custom-component>

      <!-- 2.6.0 新语法 -->
      <!-- 
			在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。
			它取代了 slot 和 slot-scope属性。

			在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 v-slot 指令，并
			以 v-slot:name 的参数的形式提供其名称。

			一个不带 name 的 <slot> 插槽会带有默认的名字“default”。

			任何没有被包裹在带有 v-slot 的 <template> 中的内容都会被视为默认插槽的内容。

			推荐为所有的插槽使用完整的基于 <template v-slot:default> 的语法。
		 -->
      <custom-component2>
        <template v-slot:default>
          <div>我要插入到默认插槽中</div>
        </template>

        <template v-slot:one>
          <div>我要插入one这个插槽</div>
        </template>

        <template v-slot:scope-slot="slotProp">
          <ul>
            <li v-for="(item, index) in slotProp.list" :key="index">
              {{item}}
            </li>
          </ul>
        </template>
      </custom-component2>

      <!-- 
      通常 v-slot 只能添加在一个 <template> 上,只有一种例外情况，当组件只提供了默认插槽的时候，
      我们就可以把 v-slot 直接用在组件上
    -->
      <custom-component3 v-slot:default>
        <div>v-slot 直接用在组件上</div>
      </custom-component3>

      <!-- 动态指令参数也可以用在 v-slot 上，来定义动态的插槽名，功能待测 -->
      <custom-component4>
        <template v-slot:slotName>
          <div>我是动态的插槽内容</div>
        </template>
      </custom-component4>
    </div>
    <script>
      Vue.component('custom-component', {
        data: function() {
          return {
            list: [1, 2, 3, 4]
          }
        },
        template: `
			<div>
				<slot name="one"><p>这是第1个提醒</p></slot>

				<slot name="two"><p>这是第2个提醒</p></slot>
					
				<slot name="three"><p>这是第3个提醒</p></slot>

				<slot><p>这是其他内容</p></slot>

				<slot :data="list"></slot>
			</div>`
      })

      Vue.component('custom-component2', {
        data: function() {
          return {
            list: [5, 6, 7, 8]
          }
        },
        template: `
			<div>
				<slot><p>这是其他内容</p></slot>

        <slot name="one"><p>这是第1个提醒</p></slot>
        
        <slot name="scope-slot" v-bind:list="list"></slot>
			</div>`
      })

      Vue.component('custom-component3', {
        data: function() {
          return {
            list: [5, 6, 7, 8]
          }
        },
        template: `
        <div>
          <slot><p>这是其他内容</p></slot>
        </div>`
      })

      Vue.component('custom-component4', {
        data: function() {
          return {
            list: [5, 6, 7, 8]
          }
        },
        template: `
        <div>
          <slot name="dynamic"><p>这是其他内容</p></slot>
        </div>`
      })

      var vm = new Vue({
        el: '#app',
        data: {
          slotName: 'dynamic'
        }
      })
    </script>
  </body>
</html>
